<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            height: 2000px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        header {
            width: 100%;
            height: 150px;
        }

        .top {
            width: 100%;
            height: 30px;
            border-bottom: 1px solid #bbb;
        }

        .wangye {
            float: right;
            position: absolute;
            right: 350px;
        }

        .shouye {
            float: right;
        }

        li {
            float: left;
            margin: 0 15px;
        }

        a {
            font-size: 14px;
            color: #333334;
        }

        .photo {
            width: 1200px;
            height: 90px;
            margin: 0 auto;
        }

        .photo img {
            width: 150px;
            margin-left: 120px;
            margin-top: 30px;
            position: absolute;
        }

        .btn input {
            position: relative;
            width: 500px;
            height: 40px;
            margin-left: 280px;
            margin-top: 40px;
        }

        .btn button {
            width: 100px;
            height: 40px;
            color: #fff;
            background-color: #3389ff;
            margin-left: -5px;
            border: none;
        }

        .btn span {
            margin-left: 10px;
        }

        .rad {
            width: 600px;
            height: 30px;
            margin-left: 250px;
            margin-top: 10px;
        }

        .rad input {
            width: 15px;
            margin-top: -10px;
            margin-left: 60px;
        }

        .wenzi {
            margin-top: -38px;
            margin-left: 60px;
        }

        .wenzi span {
            font-size: 10px;
            margin-left: 25px;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .nav {
            width: 100%;
            background-color: #01204f;
        }

        .nav-list {
            position: relative;
            display: flex;
        }

        .nav-list li {
            margin: 0 auto;
            float: left;
            height: 40px;
            line-height: 40px;
            z-index: 100;
        }

        .nav-list li.first {
            background-color: red;
            width: 60px;
            text-align: center;
            margin: 1px;
        }

        .nav-list li a {
            margin-left: -12px;
            color: white;
            text-decoration: none;
            display: block;
            width: 80px;
            height: 100%;
            padding: 0 10px;
            text-align: center;
        }

        .bh {
            height: 40px;
            width: 40px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        main {
            height: 2000px;
            background-color: #444;
        }

        .to-top {
            width: 80px;
            height: 30px;
            background-color: #3389ff;
            text-align: center;
            line-height: 30px;
            position: fixed;
            right: 250px;
            bottom: -20px;
            cursor: pointer;
            transition: all 0.5s linear;
        }
    </style>
</head>

<body>
    <header>
        <div class="top">
            <ul class="wangye">
                <li><a href="#">网页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">知道</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">文库</a></li>
            </ul>
            <ul class="shouye">
                <li><a href="#">百度首页</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">百度新闻客户端</a></li>
            </ul>
        </div>
        <div class="photo">
            <img src="logo_news_276_88_1f9876a.png" alt="加载失败">
            <div class="btn">
                <input type="text" name="" value="">
                <button type="button">百度一下</button>
                <span><a href="#">帮助</a></span>
                <span><a href="#">高级搜索</a></span>
                <span><a href="#">设置</a></span>
                <div class="rad">
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                    <div class="wenzi">
                        <span>新闻全文</span>
                        <span>新闻标题</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="container">
            <ul class="nav-list clearfix">
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">百家号</a></li>
                <li><a href="#">国内</a></li>
                <li><a href="#">国际</a></li>
                <li><a href="#">军事</a></li>
                <li><a href="#">社会</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">互联网</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">女人</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">房产</a></li>
                <li><a href="#">个性推荐</a></li>
                <div class="bh"></div>
            </ul>
        </div>
    </nav>
    <div class="container">
        <main></main>
    </div>
    <div class="to-top"> 返回顶部</div>
</body>

</html>
<script>
    var lis = document.querySelectorAll('.nav-list li');
    var bh = document.querySelector('.bh');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            var left = this.offsetLeft;
            bh.style.left = left + 'px';
            var width = this.offsetWidth;
            bh.style.width = width + 'px'
        }
        lis[i].onmouseout = function () {
            bh.style.left = 0;
            bh.style.width = '60px';
        }
    }
    var nav = document.querySelector('.nav')
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (scrollTop >= 120) {
            nav.style.position = 'fixed';
            nav.style.top = '0';
        } else {
            nav.style.position = 'static';
        }
        if (scrollTop > 300) {
            totop.style.bottom = '30px';
        } else {
            totop.style.bottom = '-30px'
        }
    }

    var totop = document.querySelector('.to-top');
    totop.onclick = function () {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
    }

</script>